<template>
  <div class="staff-container">
    <el-card shadow="never">
      <el-form :inline="true" size="small">
        <el-form-item label="员工工号：">
          <el-input v-model.trim="searchParam.staffNum" />
        </el-form-item>

        <el-form-item label="员工姓名：">
          <el-input v-model.trim="searchParam.name" />
        </el-form-item>

        <el-form-item>
          <el-button size="small" type="primary" @click="tableUpdate(1)">搜索</el-button>
        </el-form-item>
      </el-form>
      <!-- <div class="flex-start"><el-button size="small" type="primary" @click="add">新增员工</el-button></div> -->
      <div class="menu-table">
        <yl-table ref="table" :get-data="getData" border style="margin-top: 10px">
          <el-table-column prop="name" label="姓名" />
          <el-table-column prop="loginAccount" label="账号" />
          <el-table-column prop="staffNum" label="工号" />
          <el-table-column prop="deptNames" label="部门" />
          <el-table-column prop="phone" label="手机号" />
          <el-table-column prop="roleNames" label="角色" />
          <el-table-column prop="createTime" label="创建时间" />
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button v-permission="'userManage-role-config'" size="mini" type="text" @click="role(scope.row)"> 设置角色 </el-button>
              <!-- <el-button size="mini" type="warning" @click="edit(scope.row)">修改</el-button> -->
            </template>
          </el-table-column>
        </yl-table>
      </div>
    </el-card>
    <Dialog ref="dialog" :table-update="tableUpdate" />
    <Role ref="role" :table-update="tableUpdate" />
  </div>
</template>

<script>
import { internetApi } from '@/api/api'
export default {
  components: {
    Dialog: () => import('./dialog'),
    Role: () => import('./role')
  },
  data() {
    return {
      searchParam: {
        staffNum: null
      }
    }
  },

  methods: {
    //更新表格数据
    tableUpdate(...arg) {
      this.$refs.table.update(...arg)
    },
    //获取表格数据的方法
    async getData(currentPage, pageSize) {
      const { data } = await this.$request(internetApi.staffList, Object.assign(this.searchParam, { currentPage, pageSize }))
      return {
        list: data.list,
        total: data.count
      }
    },
    //新增
    add() {
      this.$refs.dialog.open()
    },
    //编辑
    edit(row) {
      this.$refs.dialog.open(row)
    },
    //设置角色
    async role(row) {
      this.$refs.role.open(row)
    }
  }
}
</script>

<style lang="scss" scoped></style>
